<template>
	<view class="u-page">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form labelPosition="left" :model="model" ref="form1">
					<u-form-item label="账号" labelWidth="80" prop="userInfo.username" borderBottom ref="item1">
						<u--input v-model="model.userInfo.username" border="none" placeholder="手机号码"></u--input>
					</u-form-item>
					<u-form-item label="密码" labelWidth="80" prop="userInfo.password" borderBottom ref="item1">
						<u--input v-model="model.userInfo.password" password border="none"
							placeholder="密码,6至20位"></u--input>
					</u-form-item>
				</u--form>
				<navigator url="/pages/register/register">
					<u--text text="没有账号,立即注册!" margin="20rpx 0 0 0" align="right" decoration="underline"
						color="#2b85e4"></u--text>
				</navigator>
				<u-button type="primary" text="提交" customStyle="margin-top: 20px" @click="submit"></u-button>
				<u-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '@/common/api.js'
	import {
		setToken,
		setLoginUser
	} from '@/util/sto.js'
	export default {
		data() {
			return {
				model: {
					userInfo: {
						username: '13000000000',
						password: '123456'
					},
				},
				rules: {
					'userInfo.username': [{
						type: 'string',
						required: true,
						message: '请输入手机号码',
						trigger: ['blur', 'change']
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					'userInfo.password': {
						type: 'string',
						min: 6,
						max: 20,
						required: true,
						message: '密码长度必须在6与20之间',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					console.log(this.model.userInfo)
					login(this.model.userInfo).then(pojo => {
						let token = pojo.token
						setToken(token)
						setLoginUser(this.model.userInfo)
						uni.$u.route({
							url: 'pages/main/main',
							params: {
								name: 'lisa'
							}
						})
					}).catch(err =>
						console.log(err)
					)
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			reset() {
				const validateList = ['userInfo.username', 'userInfo.password']
				this.$refs.form1.resetFields()
				this.$refs.form1.clearValidate()
				setTimeout(() => {
					this.$refs.form1.clearValidate(validateList)
					// 或者使用 this.$refs.form1.clearValidate()
				}, 10)
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		},
	}
</script>

<style lang="scss">

</style>